<template>
  <div class="attrWrap">
    <!-- 标题 -->
    <div class="attrWrap_title">
      <div class="attrWrap_title_label"></div>
      <div class="attrWrap_title_value">属性配置</div>
    </div>
    <!-- 表单 -->
    <a-form-model class="attrWrap_form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="12" v-if="type != 'FACTORY' && type != 'DROP'">
          <a-form-model-item label="申请表">
            <SearchTable
              @f_setTable="apltableChange"
              width="100%"
              :value="form.apltable"
              placeholder="请选择申请表"
            ></SearchTable>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="标题">
            <a-input v-model="form.title" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type != 'FACTORY' && type != 'GENERAL' && type != 'DROP'">
        <a-col :span="12">
          <a-form-model-item label="企业表">
            <SearchTable
              :disabled="!(form.yjctable == '' || form.yjctable == undefined)"
              @f_setTable="tableChange"
              width="100%"
              :value="form.table"
              placeholder="请选择企业表"
            ></SearchTable>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type != 'FACTORY' && type != 'GENERAL' && type != 'LIST' && type != 'DROP'">
        <a-col :span="12">
          <a-form-model-item label="数据带回">
            <a-select v-model="form.autoacho" placeholder="表单初始化完数据是否带到表单上">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="type == 'person'">
          <a-form-model-item label="人员可为空">
            <a-select v-model="form.emptybtn" placeholder="此类人员为空的填充按钮">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'LIST' || type == 'GENERAL'">
        <a-col :span="12" v-if="type == 'LIST' || type == 'GENERAL'">
          <a-form-model-item label="回显信息">
            <a-select v-model="form.type" placeholder="请选择回显单条还是多条记录" @change="selectChange">
              <a-select-option value="multiple"> 回显整行 </a-select-option>
              <a-select-option value="single"> 回显单个字段 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="type == 'GENERAL'">
          <a-form-model-item label="回显产品名称">
            <a-select v-model="form.isprodname" placeholder="请选择是否回显产品名称">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="type == 'LIST'">
          <a-form-model-item label="回显字段">
            <LookName
              :disabled="form.type != 'single'"
              :firstList="firstList"
              :lastList="$store.state.formJson.listData"
              :firstValue="form.lookname"
              :lastValue="form.tname"
              @firstChange="firstChange"
              @lastChange="lastChange"
            ></LookName>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'LIST' || type == 'DROP'">
        <a-col :span="12" v-if="type == 'LIST'">
          <a-form-model-item label="显示选择框">
            <a-select v-model="form.ischoice" placeholder="是否开启表格左侧选择框" @change="ischoiceChange">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="type == 'LIST' || type == 'DROP'">
          <a-form-model-item label="是否多选">
            <a-select
              :disabled="type == 'LIST' ? form.ischoice != 'true' : false"
              v-model="form.ismultiple"
              placeholder="请选择单选还是多选"
            >
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'DROP'">
        <a-col :span="12">
          <a-form-model-item label="回显副标题">
            <a-select v-model="form.isfaname" placeholder="请选择是否回显副标题">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'DROP'">
        <a-col :span="12">
          <a-form-model-item label="是否只允许添加">
            <a-select v-model="form.isaddonly" placeholder="请选择是否只允许添加">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'DROP'">
        <a-col :span="12">
          <a-form-model-item label="是否只允许删除">
            <a-select v-model="form.isreduceonly" placeholder="请选择是否只允许删除">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type == 'LIST'">
        <a-col :span="12">
          <a-form-model-item label="显示添加按钮">
            <a-select v-model="form.isaddbtn" placeholder="是否显示添加按钮">
              <a-select-option value="true"> 是 </a-select-option>
              <a-select-option value="false"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type != 'FACTORY' && type != 'GENERAL' && type != 'DROP'">
        <a-col :span="24">
          <a-form-model-item label="查询条件" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <FilterAdd :key="key1" :fieldList="entFiledsList" :valuelist="form.paramsList"></FilterAdd>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="type != 'FACTORY' && type != 'GENERAL'">
        <a-col :span="24">
          <a-form-model-item label="过滤条件" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <FilterAdd :key="key2" :fieldList="entFiledsList" :valuelist="form.fiterList"></FilterAdd>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { findTable } from '@/api/base/table.js'
import { DATA_BASE_SFAPPROVE } from '@/store/mutation-types.js'
export default {
  props: {
    // 表单
    form: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 一级分类
    type: {
      type: String,
      default: '',
    },
    // 表格列表
    filedList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      labelCol: { span: 4 }, // label宽度
      wrapperCol: { span: 20 }, // wrap宽度
      filedsList: [], // 字段列表
      entFiledsList: [], // 企业表字段列表
      firstList: [], // lookname左侧列表
      key1: 0,
      key2: 0,
    }
  },
  components: {
    SearchTable: () => import('@/views/businessAssembly/public/spareparts/searchTable'),
    FilterAdd: () => import('@/views/businessAssembly/public/spareparts/filterAdd.vue'),
    LookName: () => import('@/views/businessAssembly/public/spareparts/lookname.vue'),
  },
  watch: {
    'form.paramsList'() {
      this.key1++
    },
    'form.fiterList'() {
      this.key2++
    },
  },
  mounted() {
    // 申请表默认值回显
    if (this.form.apltable && this.filedList.length == 0) {
      this.findFileds(this.form.apltable, true, DATA_BASE_SFAPPROVE)
    }
    // 企业表默认值回显
    if (this.form.table) {
      this.findFileds(this.form.table, false, DATA_BASE_SFAPPROVE)
    }
  },
  methods: {
    // 申请表change
    apltableChange(value) {
      console.log('value', value)
      this.form.apltable = value
      this.findFileds(value, true, DATA_BASE_SFAPPROVE)
    },
    // 企业表change
    tableChange(value) {
      this.form.table = value == undefined ? '' : value
      this.findFileds(value, false, DATA_BASE_SFAPPROVE)
    },
    // 回显信息change事件
    selectChange(e) {
      this.form.type = e
      this.form.lookname = ''
      this.form.tname = ''
    },
    // lookname左侧值change事件
    firstChange(value) {
      this.form.lookname = value
    },
    // lookname右侧值change事件
    lastChange(value) {
      this.form.tname = value
    },
    // 显示选择框change事件
    ischoiceChange(e) {
      this.form.ismultiple = undefined
    },
    // 查询指定表下字段的注释和类型
    async findFileds(tableName, type, database) {
      if (tableName) {
        let { data } = await findTable({ database: database, tableName: tableName })
        if (data && data.data?.length) {
          this.filedsList = data.data.map(item => {
            return {
              fieldname: item.fieldName,
              comments: item.fieldDescription,
            }
          })
          // console.log('this.filedsList', this.filedsList)
          this.firstList = data.data.map((item) => {
            return {
              title: `${item.fieldName} - ${item.fieldDescription}`,
              value: item.fieldName,
            }
          })
        }
      } else {
        this.firstList = this.filedsList = []
      }
      if (!type) {
        this.entFiledsList = this.filedsList.map((item) => {
          return {
            title: `${item.fieldname} - ${item.comments}`,
            value: item.fieldname,
          }
        })
      }
      this.$emit('filedChange', this.filedsList, type, tableName)
    },
  },
}
</script>

<style lang="less" scoped>
.attrWrap_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.attrWrap_title_label {
  width: 4px;
  height: 16px;
  background: #007ce5;
  border-radius: 2px;
}

.attrWrap_title_value {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 550;
  color: #262626;
}

.attrWrap_form {
  margin-top: 20px;
}
</style>
